<template>
<footer class="footer">
				<!-- This should be `0 items left` by default -->
				<span class="todo-count"><strong>{{isNoDone}}</strong> item left</span>
				<!-- Remove this if you don't implement routing -->
				<ul class="filters" @click="$emit('changSome',type)">
					<li>
						<a 
      :class="{selected:type === 'all'}" 
      @click="type = 'all'"
      href="#/">
      All
      </a>
					</li>
					<li>
						<a 
      :class="{selected:type === 'no'}" 
      @click="type = 'no'"
      href="#/active">Active</a>
					</li>
					<li>
						<a 
      :class="{selected:type === 'yes'}" 
      @click="type = 'yes'"
      href="#/completed">Completed</a>
					</li>
				</ul>
				<!-- Hidden if no completed items are left ↓ -->
				<button class="clear-completed" 
    v-if="isShow"
    @click="clear">Clear completed</button>
			</footer>
</template>

<script>
export default {
   props: ['arr'],
   data () {
    return {
     type: 'all',
    }
   },
   computed: {
    isNoDone() {
     return this.arr.filter(item => item.isDone === false).length
    },
    isShow() {
    return this.arr.some(item => item.isDone === true)
    }
   },
   methods: {
    clear() {
     if(window.confirm('确定清空已完成的吗？！')){
     this.$emit('clearFn')}
    }
   }
}
</script>

<style>

</style>